// 1. 引入所需模块
const express = require('express');       // 搭建HTTP服务
const multer = require('multer');         // 处理文件上传
const fs = require('fs');                 // 操作文件/目录（如读取upload文件夹）
const path = require('path');             // 处理文件路径（避免系统路径格式差异）

// 2. 初始化Express服务
const app = express();
const port = 8081;  // 服务端口（需与实验要求一致：localhost:8081）

// 3. 配置Multer（处理图片上传）
const storage = multer.diskStorage({
  // 3.1 指定图片保存目录（必须是绝对路径，用path.resolve转换）
  destination: (req, file, cb) => {
    const uploadDir = path.resolve(__dirname, './upload');
    cb(null, uploadDir); // 第一个参数为错误信息（null表示无错误），第二个为保存目录
  },
  // 3.2 自定义上传后的文件名（避免同名文件覆盖）
  filename: (req, file, cb) => {
    // 格式：时间戳-原文件名（例：1699999999999-avatar.png）
    const uniqueName = Date.now() + '-' + file.originalname;
    cb(null, uniqueName);
  }
});

// 3.3 配置上传限制（可选但推荐，避免过大文件或非图片文件）
const upload = multer({
  storage: storage,
  limits: { fileSize: 5 * 1024 * 1024 }, // 限制文件大小：5MB（1MB=1024KB，1KB=1024B）
  fileFilter: (req, file, cb) => {        // 限制文件类型（仅允许图片）
    const imageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'];
    if (imageTypes.includes(file.mimetype)) {
      cb(null, true); // 允许上传
    } else {
      cb(new Error('仅支持JPG、PNG、GIF格式的图片！'), false); // 拒绝上传并提示错误
    }
  }
});

// 4. 托管静态文件（让浏览器能访问前端页面和图片）
// 4.1 托管根目录下的静态文件（如upload.html）
app.use(express.static(__dirname));
// 4.2 托管upload目录的图片（访问路径：/upload/图片名）
app.use('/upload', express.static(path.resolve(__dirname, './upload')));

// 5. 实现核心接口1：图片上传（POST请求，路径：/post/upload）
// upload.single('image')：处理单张图片上传，'image'对应前端表单中文件输入框的name属性
app.post('/post/upload', upload.single('image'), (req, res) => {
  try {
    // 上传成功后，返回成功信息（包含图片保存路径）
    res.send(`
      <h3>图片上传成功！</h3>
      <p>保存路径：${req.file.path}</p>
      <a href="/upload.html">返回上传页面</a> | 
      <a href="/list">查看所有图片</a>
    `);
  } catch (error) {
    // 上传失败（如文件类型错误、文件过大），返回错误信息
    res.status(400).send(`<h3>上传失败：${error.message}</h3><a href="/upload.html">返回重试</a>`);
  }
});

// 6. 实现核心接口2：查看所有图片（GET请求，路径：/list）
app.get('/list', (req, res) => {
  // 读取upload目录下的所有文件
  const uploadDir = path.resolve(__dirname, './upload');
  fs.readdir(uploadDir, (err, files) => {
    if (err) {
      // 读取目录失败（如upload文件夹被删除）
      return res.status(500).send(`<h3>读取图片目录失败：${err.message}</h3>`);
    }

    // 筛选出图片文件（排除非图片格式的文件，如隐藏文件）
    const imageFiles = files.filter(file => {
      const ext = path.extname(file).toLowerCase();
      return ['.jpg', '.jpeg', '.png', '.gif'].includes(ext);
    });

    // 生成HTML页面，展示所有图片
    let html = `
      <html>
        <head><title>图片列表</title></head>
        <body>
          <h2>Upload目录下的所有图片</h2>
          <a href="/upload.html">返回上传页面</a>
          <div style="display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px;">
    `;

    // 为每个图片添加img标签（src指向托管的图片路径）
    imageFiles.forEach(file => {
      const imageUrl = `/upload/${file}`; // 图片访问路径
      html += `
        <div style="text-align: center;">
          <img src="${imageUrl}" width="200" height="auto" alt="${file}">
          <p>${file}</p>
        </div>
      `;
    });

    // 若没有图片，显示提示
    if (imageFiles.length === 0) {
      html += `<p>暂无图片，请先上传图片！</p>`;
    }

    html += `</div></body></html>`;
    res.send(html); // 发送HTML页面给浏览器
  });
});

// 7. 启动服务
app.listen(port, () => {
  console.log(`HTTP服务已启动！访问地址：`);
  console.log(`- 上传页面：http://localhost:${port}/upload.html`);
  console.log(`- 图片列表：http://localhost:${port}/list`);
});